import React, { Component } from 'react';
import * as echarts from 'echarts';
import Pie from '@/components/Pie'
import url from '@/config/url';
import axios from '@/http/http';


class Welcome extends Component {
    state = {
        accessFrom: [],
        area: [],
        gender: []
    }

    render() {
        const { accessFrom, area, gender } = this.state
        return (
            <div id='main' style={{ display: 'flex' }}>
                <Pie id='pie1' data={accessFrom} text='搜索使用分布' legend={false} title='搜索引擎'></Pie>
                <Pie id='pie2' data={area} text='地域分布' legend={true} title='地域'></Pie>
                <Pie id='pie3' data={gender} text='性别占比' legend={true} title='性别'></Pie>
            </div>
        );
    };
    componentDidMount() {
        // 请求饼图数据
        axios.get(url.getpiedata).then(res => {
            console.log(res);
            this.setState({
                accessFrom: res.data.data.accessFrom,
                area: res.data.data.area,
                gender: res.data.data.gender
            })
        }).catch(e => { })
    }
}

export default Welcome;
